<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('数据录入')"/>
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body>
<div class="container">
    <div class="row"><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">上传图片</button></div>
    <div class="row" id="div_zls_file">

    </div>
    <div class="row">
        <div class="col-sm-8 col-md-10 col-lg-10">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#home" data-toggle="tab">位置图</a></li>
                <li><a href="#ios" data-toggle="tab">测量图</a></li>
                <li><a href="#guanxi" data-toggle="tab">安装关系图</a></li>
                <li><a href="#xijie" data-toggle="tab">细节图</a></li>
            </ul>
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">
                    <p>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">前/Front</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">后/Back</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">左/Left</button>
                    </div>
                    </p>
                </div>
                <div class="tab-pane fade" id="ios">
                    <p>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">测量图1</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">测量图2</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">测量图3</button>
                    </div>
                    </p>
                </div>
                <div class="tab-pane fade" id="guanxi">
                    <p>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">安装关系图1</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">安装关系图2</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">安装关系图3</button>
                    </div>
                    </p>
                </div>
                <div class="tab-pane fade" id="xijie">
                    <p>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">细节图1</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">细节图2</button>
                    </div>
                    <div class="col-sm-4 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-info" onclick="btnBindImg('weizhi')">细节图3</button>
                    </div>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-4 col-md-2 col-lg-2">
            <div class="col-md-12"><img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png"
                                        class="img-circle"></div>
            <div class="col-md-12"><img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png"
                                        class="img-circle"></div>
            <div class="col-md-12"><img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png"
                                        class="img-circle"></div>
            <div class="col-md-12"><img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png"
                                        class="img-circle"></div>
            <div class="col-md-12"><img src="https://www.runoob.com/wp-content/uploads/2014/06/download.png"
                                        class="img-circle"></div>
        </div>
    </div>
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="First slide">
            </div>
            <div class="item">
                <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="Second slide">
            </div>
            <div class="item">
                <img src="https://www.runoob.com/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
            </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<div class="modal inmodal"th:id="myModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span
                        aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <small>上传文件</small>
            </div>
            <div class="modal-body">
                <input id="_zls_file" type="file" name="file" multiple>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js" />
<script type="text/javascript">
    var prefix = ctx + "car/door";
    $(function () {
        // $('#myTab li:eq(1) a').tab('show');
        FileUtils.fileinput('_zls_file', [], FileUtils.packingUploadData('1', 'car_sys_guanbi'), {maxFileCount: 0});
        FileUtils.fileuploaded('_zls_file',function(event,data, previewId, index){
            if (data.response.code==0){
                data=data.response||{};
                $('#div_zls_file').before('<div id="id_fileinput_img'+data.id+'" class="col-sm-4"><img src="'+data.fileName+'" class="img-rounded" style="width:150px;height: 150"/></div>');
            }
        });
    });
    let imgId;

    function btnBindImg(type) {
        if (imgId) {

        } else {
            $.modal.msgWarning("请选择图片");
        }
    }
</script>
</body>
</html>
